<template>
  <div>
    <div>
      <el-collapse-transition>
        <div
          class="TagContainer"
          @mouseenter="showAllTag"
          v-if="!isShowAllTag"
          @mouseleave="hideAllTag"
        >
          <el-link
            class="tag"
            :class="{ active: selectedTag === 'all' }"
            @click="SwitchAllArticleList"
            >全部</el-link
          >
          <el-link
            class="tag"
            :class="{ active: selectedTag === t.id }"
            :underline="false"
            @click="SwitchTagList(t)"
            v-for="t in DefaultTagList"
            :key="t.id"
            >{{ t.tag_name }}</el-link
          >
        </div>
        <div
          class="TagContainer"
          @mouseenter="isShowAllTag = true"
          v-else
          @mouseleave="hideAllTag"
        >
          <el-link
            class="tag"
            :class="{ active: selectedTag === 'all' }"
            @click="SwitchAllArticleList"
            >全部</el-link
          >
          <el-link
            class="tag"
            :class="{ active: selectedTag === t.id }"
            :underline="false"
            @click="SwitchTagList(t)"
            v-for="t in TagList"
            :key="t.id"
            >{{ t.tag_name }}</el-link
          >
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TagList',
  props: {
    type: {
      type: String,
      required: true
    }
  },
  components: {},
  data() {
    return {
      // 全部标签
      TagList: [],
      // 默认显示的标签
      DefaultTagList: [],
      // 是否显示标签标志位
      isShowAllTag: false,
      // 选中的标签
      selectedTag: null,
      // 展开延迟定时器
      delayTimeout: null
    }
  },
  computed: {},
  watch: {},
  created() {},
  beforeDestroy() {
    clearTimeout(this.delayTimeout)
  },
  mounted() {
    this.classifyTags()
  },
  methods: {
    // tag隐藏展示功能
    async classifyTags() {
      const { type } = this
      const res = await this.$API.tags.getTagsListWithoutPage(type)
      if (res.status === 200) {
        this.TagList = res.data
      }

      if (this.TagList.length > 10) {
        this.DefaultTagList = this.TagList.slice(0, 10)
      } else {
        this.DefaultTagList = this.TagList
      }
    },
    // 显示所有Tag
    showAllTag() {
      clearTimeout(this.delayTimeout) // 清除之前的延迟定时器
      this.delayTimeout = setTimeout(() => {
        this.isShowAllTag = true
      }, 200) // 根据需要设置延迟的时间
    },
    // 隐藏所有tag
    hideAllTag() {
      // 延迟切换到隐藏标签
      this.delayTimeout = setTimeout(() => {
        this.isShowAllTag = false
        clearTimeout(this.delayTimeout)
      }, 200) // 根据需要设置延迟的时间
    },
    // 切换成通过tag获取列表
    SwitchTagList(t) {
      this.selectedTag = t.id
      this.$emit('SwitchListByTagId', t.id)
      this.$bus.$emit('SwitchListByTagId', t.id)
    },
    // 切换成获取全部文章列表
    SwitchAllArticleList() {
      this.selectedTag = 'all'
      this.$emit('SwitchListByTagId', 'all')
      this.$bus.$emit('SwitchListByTagId', 'all')
    }
  }
}
</script>

<style scoped>
.TagContainer {
  overflow: hidden;
  width: 100%;
}

.tag {
  color: #003d8f;
  font-size: 12px;
  background-color: #d9e8fe;
  display: inline-block;
  border-radius: 3px;
  text-align: center;
  height: 16px;
  padding: 3px 8px;
  margin-right: 12px;
  margin-bottom: 13px;
  transition: all 0.2s;
}

.tag:hover,
.tag:focus {
  transform: scale(1.05);
  color: #fff;
  background-color: #0077fa;
}

.tag.active {
  transform: scale(1.05);
  color: #fff;
  background-color: #0077fa;
}
</style>
